
<template>
  <div class="app">
<template>
  
  <template v-if="ispingjia === true">
    <div class="left">
      <div
        style="height: 400px; width: 480px; border-color: #ddd"
        class="scrollbar-mian"
      >
        <div class="scroll-page">
          <el-row>
            <el-col :span="24" class="info">
              <div class="top-info">
                可评价教学班：共 {{ total }} 门次，提交 {{ tijiao }} 门次，未评

                {{ weitijiao }} 门次；

              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="description">
              <div class="status-description">
                状态备注：未评完；保存状态且必填项未填写
              </div>
              <div class="status-description">已评完：保存且必填项已评完</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="teacher">
              <el-table
                style="width: 100%; height: 140px; overflow-y: auto"
                ref="tableRef"
                :data="evaLists"
                highlight-current-row
                @row-click="handleRowClick"
                @selection-change="handleSelectionChange"
                v-loading="loading"
              >
                <el-table-column label="状态" width="80">
                  <template slot-scope="scope">
                    {{ scope.row.status == 2 ? "已提交" : "未提交" }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="teacherName"
                  label="教师"
                  width="80"
                ></el-table-column>
                <el-table-column
                  prop="courseName"
                  width="120"
                  label="课程"
                ></el-table-column>
                <el-table-column
                  prop="className"
                  label="班级"
                  width="120"
                ></el-table-column>
              </el-table>
              <br />
            </el-col>
          </el-row>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
    <div class="right">
      <div class="panel panel-default" style="">
        <div class="panel-heading">
          <h3 class="panel-title">评价内容</h3>
        </div>
        <div class="row" style="">
          <div class="col-sm-12 col-md-12" style="height: 5px"></div>
        </div>
        <div class="panel-body" style="min-height: 450px" id="panel_content">
          <form >
            <el-row style="margin-bottom: 15px" v-loading="loading">
              <el-col :span="16" style="position: relative; left: -60px">
                <h3 style="text-align: left">
                  &nbsp;&nbsp;当前评价课程为:
                  <template v-if="evaList.courseName != null"
                    >{{ evaList.courseName }}
                  </template>
                  <template v-if="evaList.courseName == null"
                    >{{ evaList.courseName }}
                  </template>
                  ;上课时间:
                  <template v-for="item in courseName">
                   <!-- 第 {{ item.week }}周 第 {{ item.day }}天 第 {{ item.section }} 节 -->

                   星期{{ item.day }}
                  </template>
              <br>
                  教学班组成:
                  <template v-for="item in scoreList">
                    {{ item.className }},
                  </template>
                </h3>
              </el-col>

              <el-col :span="8" style="text-align: center">
                评价教师：<span id="jsxm">{{ evaList.teacherName }}</span
                >&nbsp;
                <img
                  v-if="img"
                  :src="img"
                  style="width: 56px; height: 64px; vertical-align: text-bottom"
                />
              </el-col>
            </el-row>
            <div class="panel-body xspj-body">
              <div class="panel panel-default panel-pjdx">
                <div class="panel-heading">
                  <h4 class="panel-title">评价对象（教师）</h4>
                </div>
                <div class="panel-body">
                  <blockquote
                    style="border-left: 0px; padding: 0px 0; margin-left: 0%"
                  >
                    <p
                      style="
                        border-left: 5px solid #0770cc;
                        padding-left: 15px;
                        font-size: 16px;
                        line-height: 1.42857;
                      "
                    >
                      教学态度
                    </p>
                  </blockquote>
                  <table class="table table-bordered table-xspj">
                    <tbody>
                      <tr class="tr-xspj">
                        <td style="width: 500px">
                          <span class="red">*</span
                          >线下教学时着装整洁，教态自然；授课精神饱满，语言准确、简练、生动、清楚。线上教学时提前上线准备教学，按时上、下课。
                        </td>
                        <td v-if="evaList.one != null">
                          {{
                            evaList.one == 1
                              ? "优秀"
                              : evaList.one == 2
                              ? "良好"
                              : evaList.one == 3
                              ? "一般"
                              : "及格"
                          }}
                          &nbsp;
                        </td>
                        <td v-if="evaList.one == null">
                          <el-radio-group v-model="from.one">
                            <el-radio :label="1">优秀</el-radio>
                            <el-radio :label="2">良好</el-radio>
                            <el-radio :label="3">一般</el-radio>
                            <el-radio :label="4">合格</el-radio>
                          </el-radio-group>
                        </td>
                      </tr>
                      <tr class="tr-xspj">
                        <td style="width: 500px">
                          <span class="red">*</span
                          >实验（训）场地、仪器、设备、软件、耗材准备到位。
                        </td>
                        <td v-if="evaList.two != null">
                          {{
                            evaList.two == 1
                              ? "优秀"
                              : evaList.two == 2
                              ? "良好"
                              : evaList.two == 3
                              ? "一般"
                              : "及格"
                          }}&nbsp;
                        </td>
                        <td v-if="evaList.two == null">
                          <el-radio-group v-model="from.two">
                            <el-radio :label="1">优秀</el-radio>
                            <el-radio :label="2">良好</el-radio>
                            <el-radio :label="3">一般</el-radio>
                            <el-radio :label="4">一般</el-radio>
                          </el-radio-group>
                        </td>
                      </tr>

                      <tr class="tr-xspj">
                        <td style="width: 500px">
                          <span class="red">*</span
                          >注重实验教学指导，及时解决在实验课中出现的问题。
                        </td>
                        <td v-if="evaList.three != null">
                          {{
                            evaList.three == 1
                              ? "优秀"
                              : evaList.three == 2
                              ? "良好"
                              : evaList.three == 3
                              ? "一般"
                              : "及格"
                          }}&nbsp;
                        </td>
                        <td v-if="evaList.three === null">
                          <el-radio-group v-model="from.three">
                            <el-radio :label="1">优秀</el-radio>
                            <el-radio :label="2">良好</el-radio>
                            <el-radio :label="3">一般</el-radio>
                            <el-radio :label="4">一般</el-radio>
                          </el-radio-group>
                        </td>
                      </tr>

                      <tr class="tr-xspj">
                        <td style="width: 500px">
                          <span class="red">*</span
                          >重视检查出勤情况，根据实际情况采取抽查点名等方式；注意维持课堂秩序，教育督促学生遵守课堂纪律。
                        </td>
                        <td v-if="evaList.four != null">
                          {{
                            evaList.four == 1
                              ? "优秀"
                              : evaList.four == 2
                              ? "良好"
                              : evaList.four == 3
                              ? "一般"
                              : "及格"
                          }}&nbsp;
                        </td>
                        <td v-if="evaList.four === null">
                          <el-radio-group v-model="from.four">
                            <el-radio :label="1">优秀</el-radio>
                            <el-radio :label="2">良好</el-radio>
                            <el-radio :label="3">一般</el-radio>
                            <el-radio :label="4">一般</el-radio>
                          </el-radio-group>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                  <blockquote
                    style="border-left: 0px; padding: 0px 0; margin-left: 0%"
                  >
                    <p
                      style="
                        border-left: 5px solid #0770cc;
                        padding-left: 15px;
                        font-size: 14px;
                        line-height: 1.42857;
                      "
                    >
                      教学内容
                    </p>
                  </blockquote>

                  <table
                    class="table table-bordered table-xspj"
                    data-qzz=".2"
                    data-pjzbxm_id="0AB6666EBFB76B70E0630100007F1CF9"
                  >
                    <tbody>
                      <tr>
                        <td style="width: 500px">
                          <span class="red">*</span
                          >内容实用，任务明确，难易适宜，方案合理，能反映专业要求，紧密联系实际。
                        </td>
                        <td v-if="evaList.five != null">
                          {{
                            evaList.five == 1
                              ? "优秀"
                              : evaList.five == 2
                              ? "良好"
                              : evaList.five == 3
                              ? "一般"
                              : "及格"
                          }}&nbsp;
                        </td>
                        <td v-if="evaList.five === null">
                          <el-radio-group v-model="from.five">
                            <el-radio :label="1">优秀</el-radio>
                            <el-radio :label="2">良好</el-radio>
                            <el-radio :label="3">一般</el-radio>
                            <el-radio :label="4">一般</el-radio>
                          </el-radio-group>
                        </td>
                      </tr>

                      <tr class="tr-xspj">
                        <td style="width: 500px">
                          <span class="red">*</span
                          >教材或实验（训）指导书合理，实验方法、原理、步骤正确清楚。
                        </td>
                        <td v-if="evaList.six != null">
                          {{
                            evaList.six == 1
                              ? "优秀"
                              : evaList.six == 2
                              ? "良好"
                              : evaList.six == 3
                              ? "一般"
                              : "及格"
                          }}&nbsp;
                        </td>
                        <td v-if="evaList.six === null">
                          <el-radio-group v-model="from.six">
                            <el-radio :label="1">优秀</el-radio>
                            <el-radio :label="2">良好</el-radio>
                            <el-radio :label="3">一般</el-radio>
                            <el-radio :label="4">一般</el-radio>
                          </el-radio-group>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                  <blockquote
                    style="border-left: 0px; padding: 0px 0; margin-left: 0%"
                  >
                    <p
                      style="
                        border-left: 5px solid #0770cc;
                        padding-left: 15px;
                        font-size: 14px;
                        line-height: 1.42857;
                      "
                    >
                      教学方法
                    </p>
                  </blockquote>

                  <table class="table table-bordered table-xspj">
                    <tbody>
                      <tr class="tr-xspj">
                        <td style="width: 500px">
                          <span class="red">*</span
                          >线下教学时示范操作、准确、熟练，步骤清晰。线上教学时不照搬线下课堂模式，有线上资源供学生学习。
                        </td>
                        <td v-if="evaList.seven != null">
                          {{
                            evaList.seven == 1
                              ? "优秀"
                              : evaList.seven == 2
                              ? "良好"
                              : evaList.seven == 3
                              ? "一般"
                              : "及格"
                          }}&nbsp;
                        </td>
                        <td v-if="evaList.seven === null">
                          <el-radio-group v-model="from.seven">
                            <el-radio :label="1">优秀</el-radio>
                            <el-radio :label="2">良好</el-radio>
                            <el-radio :label="3">一般</el-radio>
                            <el-radio :label="4">一般</el-radio>
                          </el-radio-group>
                        </td>
                      </tr>

                      <tr class="tr-xspj">
                        <td style="width: 500px">
                          <span class="red">*</span
                          >实际联系理论，激发学生兴趣，启发学生思维，注重技能培养。
                        </td>
                        <td v-if="evaList.eight != null">
                          {{
                            evaList.eight == 1
                              ? "优秀"
                              : evaList.eight == 2
                              ? "良好"
                              : evaList.eight == 3
                              ? "一般"
                              : "及格"
                          }}&nbsp;
                        </td>
                        <td v-if="evaList.eight === null">
                          <el-radio-group v-model="from.eight">
                            <el-radio :label="1">优秀</el-radio>
                            <el-radio :label="2">良好</el-radio>
                            <el-radio :label="3">一般</el-radio>
                            <el-radio :label="4">一般</el-radio>
                          </el-radio-group>
                        </td>
                      </tr>

                      <tr class="tr-xspj">
                        <td style="width: 500px">
                          <span class="red">*</span
                          >讲演结合，时间分配合理，突出训练环节
                        </td>
                        <td v-if="evaList.nine != null">
                          {{
                            evaList.nine == 1
                              ? "优秀"
                              : evaList.nine == 2
                              ? "良好"
                              : evaList.nine == 3
                              ? "一般"
                              : "及格"
                          }}&nbsp;
                        </td>
                        <td v-if="evaList.nine === null">
                          <el-radio-group v-model="from.nine">
                            <el-radio :label="1">优秀</el-radio>
                            <el-radio :label="2">良好</el-radio>
                            <el-radio :label="3">一般</el-radio>
                            <el-radio :label="4">一般</el-radio>
                          </el-radio-group>
                        </td>
                      </tr>

                      <tr class="tr-xspj" data-ywdjxm="1">
                        <td style="width: 500px">
                          <span class="red">*</span
                          >预留充足操作时间，教师认真巡视，及时指导
                        </td>
                        <td v-if="evaList.ten != null">
                          {{
                            evaList.ten == 1
                              ? "优秀"
                              : evaList.ten == 2
                              ? "良好"
                              : evaList.ten == 3
                              ? "一般"
                              : "及格"
                          }}&nbsp;
                        </td>
                        <td v-if="evaList.ten === null">
                          <el-radio-group v-model="from.ten">
                            <el-radio :label="1">优秀</el-radio>
                            <el-radio :label="2">良好</el-radio>
                            <el-radio :label="3">一般</el-radio>
                            <el-radio :label="4">一般</el-radio>
                          </el-radio-group>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                  <blockquote
                    style="border-left: 0px; padding: 0px 0; margin-left: 0%"
                  >
                    <p
                      style="
                        border-left: 5px solid #0770cc;
                        padding-left: 15px;
                        font-size: 14px;
                        line-height: 1.42857;
                      "
                    >
                      教学效果
                    </p>
                  </blockquote>

                  <table
                    class="table table-bordered table-xspj"
                    style="margin-bottom: 0px"
                  >
                    <tbody>
                      <tr class="tr-xspj">
                        <td style="width: 500px">
                          <span class="red">*</span
                          >完成实验实训任务，熟练掌握课程所用软件（仪器、设备）使用方法，专业技能有长进。
                        </td>
                        <td v-if="evaList.eleven != null">
                          {{
                            evaList.one == 1
                              ? "优秀"
                              : evaList.one == 2
                              ? "良好"
                              : evaList.one == 3
                              ? "一般"
                              : "及格"
                          }}&nbsp;
                        </td>
                        <td v-if="evaList.eleven === null">
                          <el-radio-group v-model="from.eleven">
                            <el-radio :label="1">优秀</el-radio>
                            <el-radio :label="2">良好</el-radio>
                            <el-radio :label="3">一般</el-radio>
                            <el-radio :label="4">一般</el-radio>
                          </el-radio-group>
                        </td>
                      </tr>

                      <tr class="tr-xspj">
                        <td style="width: 500px">
                          <span class="red">*</span
                          >独立动手（或创新、团队协作）能力有一定提升。
                        </td>
                        <td v-if="evaList.twelve != null">
                          {{
                            evaList.twelve == 1
                              ? "优秀"
                              : evaList.twelve == 2
                              ? "良好"
                              : evaList.twelve == 3
                              ? "一般"
                              : "及格"
                          }}&nbsp;
                        </td>
                        <td v-if="evaList.twelve === null">
                          <el-radio-group v-model="from.twelve">
                            <el-radio :label="1">优秀</el-radio>
                            <el-radio :label="2">良好</el-radio>
                            <el-radio :label="3">一般</el-radio>
                            <el-radio :label="4">一般</el-radio>
                          </el-radio-group>
                        </td>
                      </tr>

                      <tr class="tr-xspj">
                        <td style="width: 500px">
                          <span class="red">*</span
                          >线下教学时学生积极主动参与率高，反馈及时，能用专业知识分析并解决实际案例及问题。线上教学时注重学生学习效果，课堂互动多，随时关注学生反馈的问题。
                        </td>
                        <td v-if="evaList.thirteen != null">
                          {{
                            evaList.thirteen == 1
                              ? "优秀"
                              : evaList.thirteen == 2
                              ? "良好"
                              : evaList.thirteen == 3
                              ? "一般"
                              : "及格"
                          }}&nbsp;
                        </td>
                        <td v-if="evaList.thirteen === null">
                          <el-radio-group v-model="from.thirteen">
                            <el-radio :label="1">优秀</el-radio>
                            <el-radio :label="2">良好</el-radio>
                            <el-radio :label="3">一般</el-radio>
                            <el-radio :label="4">一般</el-radio>
                          </el-radio-group>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 评语 -->

                <div class="panel-footer" id="pyDiv">
                  <p class="text-left">评语：</p>
                  <div
                    v-if="evaList.comment != null"
                    class="input-xspj"
                    style="
                      margin-bottom: 0px !important;
                      border: #fff 1px solid !important;
                    "
                  >
                    {{ evaList.comment }}
                  </div>
                  <div v-if="evaList.comment === null">
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4 }"
                      placeholder="请输入内容"
                      v-model="from.comment"
                    >
                    </el-input>
                  </div>
                  <div style="text-align: center; margin: 10px auto">
                    <el-button
                      type="primary"
                      round
                      size="medium"
                      @click="submitForm"
                      >提交</el-button
                    >
                    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
                    <el-button
                      type="warning"
                      round
                      size="medium"
                      @click="reset()"
                      >重置</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </form>

          <div></div>
        </div>
      </div>
    </div></template>
      
 <template  v-if="ispingjia===false">
  <div class="container">
        <h1>暂未开始评教</h1>
        <p>请耐心等待，评教功能即将开启。</p>
    </div>
 </template>
 
 <template  v-if="ispingjia === '该角色没有评教'">
  <div class="container">
        <h1>该角色没有评教</h1>
    </div>
 </template>
</template>
 
  </div>
</template>

<script>
import { updateEva } from "@/api/edu/eva";
import {  listEvaById,getEvaByTime} from "@/api/edu/eva";
import { listSch } from "@/api/edu/sch";
import { listTeacher } from "@/api/system/user";
import { listScore } from "@/api/edu/score";
export default {
  data() {
    return {
      evaLists: [],
      res: [],
      evaList: "",
      // 表单参数
      from: {},
      details: {},
      courseName: [],
      scoreList: [],
      loading: true,
      teacherInfo: null,
      img: null,
      total: 0,
      tijiao: 0,

      weitijiao: 0,

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        teacherId: null,
        teacherName: null,
        studentId: null,
        studentName: null,
        one: null,
        two: null,
        three: null,
        four: null,
        five: null,
        six: null,
        seven: null,
        eight: null,
        nine: null,
        ten: null,
        eleven: null,
        twelve: null,
        thirteen: null,
        comment: null,
        commentTime: null,
        year: null,
        status: null,
        semester: null,
        courseId: null,
        courseName: null,
        deptId: null,
        deptName: null,
        classId: null,
        className: null,
        collegeId: null,
        collegeName: null,
      },
      ispingjia:null
    };
  },
  created() {
    this.getBeganTime();
    
  },

  mounted() {
    this.getcouresList();
    this.getscoreList();
    this.getTeacherInfo(this.evaLists.teacherName);
    this.loading = false;
  },

  methods: {
    //**查询是否开始评教 */ 
    getBeganTime(){
      getEvaByTime().then(res=>{
        this.loading = true
        if(res == "true"){
          this.ispingjia = true ;
        }
        if  (res == "false"){
          this.ispingjia = false ;
        }
        else{
          this.ispingjia = res ;
        }
        

       if( this.ispingjia){
        this.getList();
        this.getList1();
        this.loading = false
       }
      })

    },
    /** 查询评教列表 */
    getList() {
      console.log(this.queryParams);
      listEvaById(this.queryParams).then((response) => {
        this.evaLists = response.rows;
        this.total = response.total;
        this.selectFirstRow();
      });
    },
    //获取提交或者未提交的状态
    getList1() {
      this.queryParams.pageSize = 1000;
      listEvaById(this.queryParams).then((response) => {
        this.res = response.rows;
        for (let i = 0; i < this.res.length; i++) {
          if (this.res[i].status === 1) {
            this.weitijiao++;

          }
          if (this.res[i].status === 2) {
            this.tijiao++;

          }
        }
      });
      this.queryParams.pageSize = 10;
    },
    selectFirstRow() {
      this.$nextTick(() => {
        if (this.evaLists.length > 0) {
          console.log(this.$refs.tableRef);

          this.$refs.tableRef.setCurrentRow(this.evaLists[0]);
          this.evaList = this.evaLists[0];

          // 选中第一行数据
        }
      });
    },

    handleRowClick(row, column) {
      this.loading = true;
      this.evaList = row;
      this.getcouresList();
      this.getscoreList();
      this.getTeacherInfo(this.evaList.teacherName);
      this.loading = false;
    },
    /** 查询课列表 */
    getcouresList() {
      let queryParams = {
        pageNum: 1,
        pageSize: 1000,
        tccId: null,
        week: null,
        day: null,
        courseId: this.evaList.courseId,
        courseName: null,
        teacherId: null,
        teacherName: null,
        classId: null,
        className: null,
        year: null,
        semester: null,
      };
      listSch(queryParams).then((response) => {
        this.courseName = response.rows;
      });
    },

    /** 查询成绩列表 */
    getscoreList() {
      let queryParams = {
        pageNum: 1,
        pageSize: 10,
        studentId: null,
        studentName: null,
        courseId: this.evaList.courseId,
        courseName: null,
        teacherId: null,
        teacherName: null,
        deptId: null,
        deptName: null,
        year: null,
        semester: null,
        classId: null,
        className: null,
        scoreNum: null,
        examTime: null,
        collegeId: null,
        collegeName: null,
      };
      listScore(queryParams).then((response) => {
        this.scoreList = response.rows;
      });
    },
    /** 查询评教列表 */
    getTeacherInfo(query) {
      listTeacher(query).then((response) => {
        this.teacherInfo = response.data;
        this.img = this.teacherInfo[0].avatar;
      });
    },
    //修改评教
    submitForm() {
      if (
        this.from.one == null ||
        this.from.two == null ||
        this.from.three == null ||
        this.from.four == null ||
        this.from.five == null ||
        this.from.six == null ||
        this.from.seven == null ||
        this.from.eight == null ||
        this.from.nine == null ||
        this.from.ten == null ||
        this.from.eleven == null ||
        this.from.twelve == null ||
        this.from.thirteen == null
      ) {
        this.$message({
          message: "您有未勾选完成的",
          type: "warning",
        });
        return;
      }
      if (this.from.comment == null) {
        this.$message({
          message: "评语不能为空",
          type: "warning",
        });
        return;
      } else {
        if (this.evaList.teaEvaId != null) {
          let mergedObj = Object.assign({}, this.evaList, this.from);
          console.log(this.evaList);
          console.log(mergedObj);
          this.loading = true;
          updateEva(mergedObj).then((response) => {
            this.$modal.msgSuccess("新增成功");
            //
            this.getList();
            this.getList1();
            this.reset()
            this.loading = false;
          });
        }
      }
    },
    reset() {
      this.from.one = "";
      this.from.two = "";
      this.from.three = "";
      this.from.four = "";
      this.from.five = "";
      this.from.six = "";
      this.from.seven = "";
      this.from.eight = "";
      this.from.nine = "";
      this.from.ten = "";
      this.from.eleven = "";
      this.from.twelve = "";
      this.from.thirteen = "";
      this.from.comment = "";
    },
  },
};
</script>

<style scoped>
.app {
  display: flex;
  margin-top: 10px;
}

.left {
  width: 35%;

  height: 100vh;
  overflow-y: auto;
}

.info {
  padding: 10px;
  background: #ffffdd;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.description {
  padding: 10px;
  background: #e0e8ff;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.scrollbar-mian {
  width: 100%;
}
.teacher {
  margin-top: 12px;
  border-radius: 3%;
}
.scroll-page {
  height: 100%;
  width: 430px;
  margin-left: 2.3%;
  text-align: center;
}
.el-row {
  margin-left: 7%;
}

.top-info,
.status-description,
.records,
.controls {
  margin-bottom: 10px;
}
.scrollbar-mian {
  margin-left: 9.5%;
  border: 1px solid #ddd;
  background-color: #ddd;
}
.right {
  /* margin-left:100px; */
  flex-grow: 1;
  height: 100vh;
  width: 60%;
  float: rigth;
  overflow-y: auto;
}
.panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}
.panel-heading {
  position: relative;
  padding: 7px 15px !important;
}

.panel-body {
  padding: 15px;
}
.table-bordered {
  border: 1px solid #ddd;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  background-color: transparent;
  border-spacing: 0;
  border-collapse: collapse;
}
td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border: 1px solid #ddd;
}
.panel-footer {
  padding: 6px 15px !important;
}
.text-left {
  text-align: left;
}
.panel-default {
  border-color: #ddd;
  border: 1px solid #ddd;
}
.pagination-container /deep/ .el-pagination {
  right: -35px;
  position: absolute;
  top: -16px;
}
.pagination-container {
  background-color: rgb(221, 221, 221);
  padding: 32px 16px;
}
.container {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 4rem;
            text-align: center;
            margin: 0 auto;
        }
        h1 {
            font-size: 2rem;
            margin-bottom: 1rem;
            text-align: center;
      
        }
        p {
            font-size: 1.2rem;
            color: #666;
        }
</style>
